<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bufantec</title>
    <link rel="stylesheet" href="animate/style.css">
    <link rel="stylesheet" href="animate/swiper-bundle.min.css">
    <link rel="stylesheet" href="animate/animate.min.css">
</head>

<body>
    <!-- header导航 -->
    <header>
        <div class="center wow fadeInDown" data-wow-duration="1s">
            <div class="logo"><img src="images/logo.png" alt=""></div>
            <ul class="nav">
                <!-- li的下划线用伪元素做，激活样式：谁被点击或hover时，激活下划线的样式 -->
                <li><a href="">首页</a></li>
                <li><a href="">项目案例</a></li>
                <li><a href="">加入我们</a></li>
                <li><a href="">联系我们</a></li>
            </ul>
        </div>
    </header>
    <!-- 轮播图 用jquery动态插入三张图片-->
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="img/m1.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="img/m2.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="img/m3.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="img/m4.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="img/m5.jpg" alt="">
            </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>

    <!-- 这里可以尝试将icon、h3、p 分别放入数组，然后动态插入===>练习动态生成 -->
    <!-- 快捷方式：ul>li*6>img+h3+p  然后按tab键 -->
    <div class="areas wow slideInUp" data-wow-duration="1s">
        <ul>
        </ul>
    </div>
    <div class="wx">
        <div class="left">
            <h2 class="wow fadeInUp" data-wow-duration="0.8s">微信小程序/公众号开发</h2>
            <p class="wow fadeInUp" data-wow-duration="0.8s">小程序，公众号无需安装卸载方便快捷，内置功能，用完即走，不占空间，低成本低门槛。满足不同客户的不同需求。</p>
            <h3>优势特点:</h3>
            <table class="excel wow slideInUp" data-wow-duration="1s">
                <tbody>
                    <tr>
                        <td>微官网</td>
                        <td>微商城</td>
                    </tr>
                    <tr>
                        <td>微分销</td>
                        <td>店铺装修</td>
                    </tr>
                    <tr>
                        <td>会员管理</td>
                        <td>便捷支付</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="right">
            <img src="images/mobile-spot.png" alt="" class="inner wow slideInRight" data-wow-duration="1.4s">
            <img src="images/mobile-font.png" alt="" class="middle wow slideInRight" data-wow-duration="1.6s">
            <img src="images/shouji2.png" alt="" class="outer wow slideInRight" data-wow-duration="1.2s">
        </div>
    </div>
    <div class="web">
        <div class="pic">
            <img src="images/mobile-spot.png" alt="" class="last wow slideInLeft" data-wow-duration="1s">
            <img src="images/web-font.png" alt="" class="second wow slideInLeft" data-wow-duration="1.6s">
            <img src="images/diannao.png" alt="" class="first wow slideInLeft" data-wow-duration="1.2s">
        </div>
        <div class="text">
            <h2 class="wow fadeInUp" data-wow-duration="0.8s">企业型网站 / 营销型网站</h2>
            <p class="wow fadeInUp" data-wow-duration="0.8s">专为追求高性价比的中小型企业设计。简洁大方的页面设计，满足中小企业基本的网络宣传需求。</p>
            <h3>优势特点:</h3>
            <table class="excel wow slideInUp" data-wow-duration="1s">
                <tbody>
                    <tr>
                        <td>一年免费维护</td>
                        <td>提供后台系统</td>
                    </tr>
                    <tr>
                        <td>提供域名注册</td>
                        <td>提供全套备案服务</td>
                    </tr>
                    <tr>
                        <td>提供空间租用</td>
                        <td>提供基础SEO优化</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="success">
        <div class="title">
            <h2>成功案例</h2>             
        </div>
        <ul>
            <li class="act"><a href="javascript:;">全部</a></li>
            <li><a href="javascript:;">网站</a></li>
            <li><a href="javascript:;">小程序</a></li>
            <li><a href="javascript:;">APP</a></li>
        </ul>
    </div>
    <div class="container">
        <ul class="case">
            <li>
                <a href="" style="background-image: url(img/sheying.jpg);" target='_blank' class="pic"></a>
                <h3>摄影</h3>
                <p>与时间共存</p>
            </li>
            <li>
                <a href="" style="background-image: url(img/hunsha.jpg);" target='_blank' class="pic"></a>
                <h3>婚纱</h3>
                <p>婚纱&礼服&珠宝&配饰</p>
            </li>
            <li>
                <a href="" style="background-image: url(img/manlv.jpg);" target='_blank' class="pic"></a>
                <h3>慢旅</h3>
                <p>让美好触手可得</p>
            </li>
            <li>
                <a href="" style="background-image: url(img/jingjie.jpg);" target='_blank' class="pic"></a>
                <h3>境界</h3>
                <p>摄影摄像行业网站</p>
            </li>
            <li>
                <a href="" style="background-image: url(img/zaowu.jpg);" target='_blank' class="pic"></a>
                <h3>造物</h3>
                <p>年轻人的购物空间</p>
            </li>
            <li>
                <a href="" style="background-image: url(img/jianshe.jpg);" target='_blank' class="pic"></a>
                <h3>简设装饰</h3>
                <p>简设&家居&办公&餐饮</p>
            </li>
        </ul>
        <ul>
            <li><img src="images/suc.png" alt=""></li>
            <li><img src="images/suc2.png" alt=""></li>
            <li><img src="images/suc.png" alt=""></li>
            <li><img src="images/suc3.png" alt=""></li>
            <li><img src="images/suc.png" alt=""></li>
            <li><img src="images/suc5.png" alt=""></li>
        </ul>
        <ul>
            <li><img src="images/suc.png" alt=""></li>
            <li><img src="images/suc2.png" alt=""></li>
            <li><img src="images/suc.png" alt=""></li>
            <li><img src="images/suc5.png" alt=""></li>
            <li><img src="images/suc.png" alt=""></li>
            <li><img src="images/suc4.png" alt=""></li>
        </ul>
        <ul>
            <li><img src="images/suc2.png" alt=""></li>
            <li><img src="images/suc5.png" alt=""></li>
            <li><img src="images/suc4.png" alt=""></li>
            <li><img src="images/suc.png" alt=""></li>
            <li><img src="images/suc3.png" alt=""></li>
            <li><img src="images/suc.png" alt=""></li>
        </ul>
    </div>
    <div class="pagenav"></div>
    <div class="about">
        <div class="left">
            <div class="box"></div>
            <p></p>
        </div>
        <div class="right">
            <img src="" alt="">
        </div>
    </div>
    <footer>
        <div class="contact"></div>
        <div class="box1">
            <div class="logo"></div>
            <p></p>
        </div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="flag"></div>
    </footer>
    <!-- jquery.js必须最先引入，否则报错-->
    <script src="js/jquery.min.js"></script>
    <script src="js/swiper-bundle.min.js"></script>
    <script src="js/wow.min.js"></script>
    <script src="js/index.js"></script>
    <script>
        new WOW().init()
    </script>
</body>

</html>